<template>
  <div class="container mx-auto px-6 py-12">
    <div class="text-center mb-16">
      <h2 class="text-3xl lg:text-4xl font-bold text-white mb-4">联系我们</h2>
      <div class="w-20 h-1 bg-white mx-auto mb-6"></div>
      <p class="text-indigo-100 max-w-3xl mx-auto">
        我们随时准备为您提供帮助，请随时与我们联系
      </p>
    </div>

    <div class="flex flex-col lg:flex-row gap-12">
      <div class="lg:w-1/2">
        <div class="bg-opacity-10 backdrop-blur-sm rounded-xl p-8">
          <h3 class="text-2xl font-semibold text-white mb-6">联系方式</h3>

          <div class="space-y-6">
            <div v-for="(info, index) in contactInfo" :key="index" class="flex items-start">
              <div class="p-3 rounded-full bg-white bg-opacity-20 mr-4">
                <span :class="info.icon" class="text-xl text-white"></span>
              </div>
              <div>
                <h4 class="text-white font-medium">{{ info.title }}</h4>
                <a v-if="info.link" :href="info.link" class="text-indigo-100 hover:text-white">
                  {{ info.value }}
                </a>
                <p v-else class="text-indigo-100">{{ info.value }}</p>
              </div>
            </div>
          </div>

          <div class="mt-8">
            <h4 class="text-white font-medium mb-4">关注我们</h4>
            <div class="flex space-x-4">
              <a href="#"
                class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition-all">
                <span class="i-carbon-logo-wechat text-[#84cc16] text-base">微博</span>
              </a>
              <a href="#"
                class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition-all">
                <span class="i-carbon-logo-weibo text-[#d97706] text-base">抖音</span>
              </a>
              <a href="#"
                class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition-all">
                <span class="i-carbon-logo-linkedin text-[#dc2626] text-xs">小红书</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="lg:w-1/2">
        <div class="bg-white rounded-xl shadow-lg p-8">
          <h3 class="text-2xl font-semibold text-gray-800 mb-6">发送消息</h3>

          <form @submit.prevent="submitForm" class="space-y-6">
            <div>
              <label for="name" class="block text-gray-700 mb-2">姓名</label>
              <input id="name" v-model="form.name" type="text" placeholder="请输入您的姓名" required
                class="w-full px-4 py-3 border border-gray-300 text-black  rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 placeholder:text-gray-500">
            </div>

            <div class="grid lg:grid-cols-2 gap-6">
              <div>
                <label for="email" class="block text-gray-700 mb-2">邮箱</label>
                <input id="email" v-model="form.email" type="email" placeholder="请输入您的邮箱" required
                  class="w-full px-4 py-3 border border-gray-300 text-black rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 placeholder:text-gray-500">
              </div>

              <div>
                <label for="phone" class="block text-gray-700 mb-2">电话</label>
                <input id="phone" v-model="form.phone" type="tel" placeholder="请输入您的电话" required
                  class="w-full px-4 py-3 border border-gray-300 text-black rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 placeholder:text-gray-500">
              </div>
            </div>

            <div>
              <label for="message" class="block text-gray-700 mb-2">留言</label>
              <textarea id="message" v-model="form.message" rows="2" placeholder="请输入您的留言" required
                class="w-full px-4 py-3 border border-gray-300 text-black rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 placeholder:text-gray-500"></textarea>
            </div>

            <button type="submit"
              class="w-full py-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">
              发送消息
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
const contactInfo = [
  {
    icon: 'i-carbon-phone',
    title: '电话',
    value: '+86 400-123-4567',
    link: 'tel:+864001234567'
  },
  {
    icon: 'i-carbon-email',
    title: '邮箱',
    value: 'info@company.com',
    link: 'mailto:info@company.com'
  },
  {
    icon: 'i-carbon-location',
    title: '地址',
    value: '中国上海市浦东新区张江高科技园区科苑路88号'
  }
]

const form = ref({
  name: '',
  email: '',
  phone: '',
  message: ''
})

const submitForm = async () => {
  // 这里添加表单提交逻辑
  console.log('表单提交:', form.value)
  try {
    const res = await $fetch('/api/contactEmail', {
      method: 'POST',
      body: form.value
    })
    if (res.success) {
      alert('发送成功！')
      form.value = { name: '', email: '', phone: '', message: '' }
    } else {
      alert('发送失败，请稍后再试')
    }
  } catch (e) {
    alert('发送失败，请检查网络')
  }
}
</script>
